.aa{
    color:red;
    font-size: 30px;
    font-weight: bold;
}
.bb{
    text-decoration: underline;
    background: pink;
    border: 1px solid #333;
}

// 继承，两种写法：1.在规则内部  2.在选择器后面
.d1:extend(.aa){
    border: 1px solid #ccc;
    // .aa; // 混入的方式

    // &:extend(.aa);
}

// 多继承，即同时继承多个样式
.d2{
    height:200px;
    &:extend(.aa,.bb); // 以逗号隔开
}

// 继承所有 extend all
.cc{
    color: red;
}
.cc .dd{
    font-size: 40px;
}
.ee .cc{
    text-decoration: underline;
}
div.cc{
    background: green;
}

.d4{
    border: 1px solid #ccc;
    &:extend(.cc all); // 凡是包含.cc的选择器都继承
}